<template>
  <div class="dashboard-container">
    <div class="app-container">
      <PageTools ref="pageDom" @mo-search="searchFn">
        <template #btTitle>
          <el-button size="small" type="primary" @click="addFn">添加页面</el-button>
        </template>
        <template #tableBody>
          <div class="table-box">
            <el-table
              :data="formData"
              border
              style="width: 100%"
            >
              <el-table-column
                prop="title"
                label="标题"
                min-width="30%"
              />
              <el-table-column
                v-slot="{row}"
                prop="content"
                label="内容"
                min-width="50%"
              >
                <div v-html="row.content" />
              </el-table-column>
              <el-table-column v-slot="{row}" label="操作" width="240">
                <template>
                  <el-button type="primary" size="small" @click="editFn(row.id)">编辑</el-button>
                  <el-button type="danger" size="small" @click="delFn(row.id)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <el-row type="flex" justify="center" style="margin-top:20px">
            <el-pagination
              :page-size="limit"
              layout="prev, pager, next"
              :total="total"
              @current-change="currentChange"
            />
          </el-row>
        </template>
      </PageTools>
      <AddPages ref="addDom" :show-dialog.sync="showDialog" @updatedata="addGetPages" />
    </div>
  </div>
</template>

<script>
import PageTools from './components/pagetools.vue'
import { getPagesList, getSinglePage, delPagesList } from '@/api/pages/index'
import AddPages from './components/add-pages.vue'
export default {
  components: { PageTools, AddPages },
  data() {
    return {
      formData: [

      ],
      total: 0,
      limit: 3, // 请求多少条
      start: 0, // 从第几条数据
      showDialog: false
    }
  },
  async created() {
    this.getPages()
  },
  methods: {
    // 渲染页面
    async getPages() {
      const list = await getPagesList()
      const res = await getPagesList({
        _limit: this.limit,
        _start: this.start
      })
      this.total = list.data.length
      // console.log(list)
      this.formData = res.data
    },
    // 设置分页
    currentChange(page) {
      // 判断当点击分页器的时候是否处于模糊搜索
      if (this.$refs.pageDom.searchData) {
        this.start = (page - 1) * this.limit
        // 如果是那就得再次调用模糊搜索的函数
        this.searchFn(this.$refs.pageDom.moTotal)
      } else {
        this.start = (page - 1) * this.limit
        this.getPages()
      }
    },
    // 添加页面
    addFn() {
      this.showDialog = true
    },
    // 添加页面后的刷新问题
    addGetPages() {
      // 同样要判断刷新页面环境是不是处于模糊搜索
      if (this.$refs.pageDom.searchData) {
        this.$refs.pageDom.MoSearch()
      } else {
        this.getPages()
      }
    },
    // 编辑页面
    async editFn(id) {
      this.showDialog = true
      const res = await getSinglePage(id)
      this.$refs.addDom.formData = res.data
    },
    // 删除页面
    delFn(id) {
      this.$confirm('您确定要删除该页面吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        await delPagesList(id)
        // 判断当删除到当前页最后一条数据时 需跳转上一个页面
        if (this.formData.length === 1 && this.start !== 0) {
          this.start -= this.limit
          // 判断是否处于模糊搜索  是则渲染模糊搜索的列表
          if (this.$refs.pageDom.searchData) {
            this.searchFn(this.$refs.pageDom.moTotal - 1)
          } else {
            this.getPages()
          }
        }
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    async searchFn(res) {
      // 拿到搜索框的值
      const str = this.$refs.pageDom.searchData
      if (str === '') {
        this.getPages()
      } else {
        const val = await getPagesList({
          _limit: this.limit,
          _start: this.start,
          title_contains: str
        })
        console.log(154, val.data.length)
        console.log(155, res)
        this.total = res
        this.formData = val.data
      }
    }

  }
}
</script>

<style lang="scss" scoped>
.table-box{
  margin-top:20px ;
  padding-top:20px ;
  padding-bottom:20px;
    width: 100%;
    border-top: 1px solid #e0e3e9;
    border-bottom: 1px solid #e0e3e9;
}
</style>
